<template>
  <div class="details">
    <div class="img">
      <div class="zoom">
        <vue-photo-zoom-pro
          :url="url"
          :out-zoomer="true"
          :scale="2.5"
        ></vue-photo-zoom-pro>
      </div>
      <div class="my-4 text-center" style="font-size: 18px; font-weight: bold">
        {{ detail[fieldA] }}
      </div>
      <div>
        <swiper
          :slides-per-view="5"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
        >
          <swiper-slide v-for="item in imgs" :key="item" @click="cimg(item)">
            <img :src="item" />
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <div class="project">
      <div class="title">项目详情</div>
      <div v-html="detail[fieldB]"></div>
    </div>
  </div>
</template>
<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import vuePhotoZoomPro from "vue-photo-zoom-pro";
import "vue-photo-zoom-pro/dist/style/vue-photo-zoom-pro.css";
import { useRouter, useRoute } from "vue-router";
import { onMounted, ref, inject } from "vue";
import product from "@/api/product.js";
const allfield = inject("allfield");
const { fieldA, fieldB } = allfield();
const route = useRoute();
const detail = ref({});
const imgs = ref([]);
const url = ref(null);
const productDetail = async () => {
  const res = await product.productDetail(route.query.aid);
  detail.value = res.dc1[0];
  url.value = detail.value.article_cover;
  imgs.value = detail.value?.article_share.split(",");
};
const cimg = (path) => {
  url.value = path;
};
onMounted(() => {
  productDetail();
});
</script>
<style scoped lang="scss">
.details {
  .img {
    width: 450px;
    .zoom {
      height: 380px;
    }
  }
  .project {
    .title {
      background-color: #515151;
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      color: #ffffff;
      margin: 20px 0;
    }
  }
}
</style>
<style>
.vue-photo-zoom-pro,
.img-preview {
  width: 100%;
  height: 100%;
}
</style>
